@charset "utf-8";


@import "common";


.container-fluid{
    .engine{
        background: #fbfaf7;
        border-bottom: 1px solid #eaeaee;
        .container{
            padding-top:106px ;
            padding-bottom: 144px;
            background: url(../img/index/engine5.jpg) no-repeat right;
        }
        .engine_top{
            padding-bottom: 78px;
            div:first-of-type{
                font-size: 48px;
                color: #0078d7;
                font-weight: bold;
                line-height: 84px;
            }
            div:last-of-type{
                font-size: 30px;
                color: #666666;
            }
        }
        .engine_mid{
            .engine_icon{
                width: 64px;
                height: 64px;
                border-radius: 3px;
                margin-top: 8px;
                cursor: pointer;
                transition: all 1s ease-in-out;
                &:hover{
                    transform: rotate(720deg);
                    background-color:gray ;
                }
            }
            .engine_icon1{
                background: url(../img/index/engine1.png) no-repeat center #0078D7;
            }
            .engine_icon2{
                background: url(../img/index/engine2.png) no-repeat center #0078D7;
            }
            .engine_icon3{
                background: url(../img/index/engine3.png) no-repeat center #0078D7;
            }
            .engine_icon4{
                background: url(../img/index/engine4.png) no-repeat center #0078D7;
            }
            .engine_text{
                div:first-of-type{
                    font-size: 20px;
                    color: #333333;
                    line-height: 34px;
                }
                div:last-of-type{
                    font-size: 14px;
                    color: #666;
                    line-height: 24px;
                }
            }
            .margin_42{
                margin-bottom: 42px;
            }
        }
    }
    /*优势S*/
    .advantage{
        .container{
            padding:120px 0px 94px;
        }
        /*标题*/
        .advantage_title{
            text-align: right;
            font-size: 48px;
            color:#8fc31f ;
            margin-bottom: 40px;
        }
        .advantage_content{
            
            .advantage_icon{
                width: 54px;
                height: 54px;
                border-radius: 50%;
                cursor: pointer;
                margin-bottom: 15px;
            }
            .advantage_icon1{
                background: url(../img/index/advantage2.png) no-repeat center #8fc31f;
            }
            .advantage_icon2{
                background: url(../img/index/advantage3.png) no-repeat center #8fc31f;
            }
            .advantage_icon3{
                background: url(../img/index/advantage4.png) no-repeat center #8fc31f;
            }
            .advantage_icon4{
                background: url(../img/index/advantage5.png) no-repeat center #8fc31f;
            }
            /*文字内容*/
            .advantage_text{
                line-height: 54px;
                font-size: 14px;
                color: #666;
            }
        }
    }
    /*家族S*/
    .family{
        background: #0079d7;
        padding: 100px 20px 70px;
        .family_title{
            text-align: center;
            font-size: 48px;
            color: #fffefe;
            margin-bottom: 45px;
        }
        .family_content{
            color: #fff;
            &>div>.row{
                margin:0 auto;
            }
            .family_icon{
                padding-top: 20px;
                padding-bottom: 110px;
                img{
                    width: 66px;
                    height: 66px;
                    vertical-align: middle;
                }
            }
            .family_text{
                .row{
                    div:first-of-type{
                        font-size: 33px;
                        line-height: 56px;
                    }
                    div:last-of-type{
                        font-size: 14px;
                        line-height: 30px;
                    }
                }
            }
        }
    }
    /*游戏S*/
    .game{
        font-size: 14px;
        color: #2a2a2a;
        .game_title{
            margin: 75px 0px 40px;
            div:first-of-type{
                font-size: 35px;
//              text-align: center;
                padding-left: 0;
            }
            div:last-of-type{
                line-height: 30px;
                text-align: right;
                a{
                    color: #2a2a2a;
                    &:hover{
                        color: deepskyblue;
                    }
                }
            }
        }
        .game_content{
            text-align: center;
            >div:first-of-type{
                margin-bottom: 50px;
                img{
                    width:370px;
                    height:200px;
                }
            }
            >div:last-of-type{
                float: none;
                overflow: hidden;
                margin: 0 auto;
                padding: 0;
                .row:last-of-type img{
                    margin-top: 30px;
                }
                img{
                   width: 67px;
                   height: 67px;
                   cursor: pointer;
                }
                p{
                    margin: 0;
                    text-align: center;
                    a{
                        color: #2a2a2a;
                        &:hover{
                            color: #ff6900;
                        }
                    }
                }
            }    
        }
    }
    /*伙伴S*/
    .partner{
        background: #f4f4f4;
        padding:35px 0px 62px;
        .partner_title{
            margin-bottom: 6px;
            padding-left: 15px;
            span:first-of-type{
                font-size: 30px;
                color: #2a2a2a;
            }
            span:last-of-type{
                font-size: 11px;
                color: 777;
            }
        }
        .partner_content{
            div{
                margin-top: 20px;
            }
            div>img{
                cursor: pointer;
                border: 1px solid #ddd;
                border-radius: 3px;
                max-width: 100%;
//              height: 58px;
                text-align: center;
                vertical-align: middle;
                 &:hover{
                    @include bshodow;
                }
            }
        }
    }
}


/*小屏幕 平板 (≥768px)*/
@media only screen and (min-width:768px) and (max-width:991px){
    .container-fluid {
        .row{
            margin: 0;
        }
        .engine{
            .container{
                background: url(../img/index/engine5.jpg) no-repeat right 70%;
            }
            .engine_mid .margin_42{
                margin-bottom: 0 ;
            }
            .engine_icon{
                margin-bottom: 45px;
                margin-right: 8px;
            }
        }
        .advantage{
            .advantage_title{
                text-align: center;
            }
            .advantage_content{
                >div{
                    padding-left:0 ;
                    padding-right: 0; 
                }
                .row>div{
                    padding-left:0 ;
                    padding-right: 0;
                }
                .row{ margin-bottom: 15px; }
                .advantage_text{
                    margin-left: 15px;
                }
            }
        }
        .family{
            .family_content{
                .family_icon{ padding-bottom: 60px; }
            }
        }
        .game{
            .game_content{
                margin-bottom: 40px;
                div:first-of-type img{ margin: 0 auto; }
            }
        }
    }
}

/**手机端<768px)**/
@media only screen and (max-width:767px){
    .row>div{
        padding-left:0 ;
        padding-right: 0;
    }
    .container-fluid  .engine .container{
        background: none;
    }
    .container-fluid .row{
        margin: 0;
    }
    .container-fluid {
        /*引擎S*/
        .engine{
            .container{
                padding-top: 40px;
                padding-bottom: 10px;
            }
            .engine_top{
                padding-bottom: 35px;
                div:first-of-type{ font-size: 35px; }
                div:last-of-type{ font-size: 15px; }
            }
            .engine_mid .margin_42{
                margin-bottom: 0 ;
            }
            .engine_icon{
                margin-bottom: 55px;
                margin-right: 8px;
            }
        }
        /*优势S*/
        .advantage{
            .container{
                padding: 50px 0px 25px;
            }
            .advantage_title{
                text-align: left;
                font-size: 35px;
                margin-left: 15px;
            }
            .advantage_content{
                
                img{ display: none; }
                .row{
                    margin-left: 15px;
                    margin-bottom: 15px;
                   .advantage_text{
                       line-height: 26px;
                       margin-left: 15px;
                   }
                }
            }
        }
        /*家族S*/
        .family{
            padding-top: 60px;
            .container{
                padding: 0;
            }
            .family_title{
                 font-size: 35px; 
                 text-align:initial;
                 margin-bottom: 30px;
            }
            .family_content{
                .family_icon{
                    padding-bottom: 70px; 
                }
                .family_text{
                    .row div:first-of-type{ font-size: 25px; }
                } 
            }
        }
        /*游戏S*/
       .game{
           .game_title{
               margin-top: 60px;
               div:first-of-type{ 
                   font-size: 22px;
               }
           }
           .game_content{
               margin-bottom: 40px;
                div:first-of-type img{ margin: 0 auto; }
                >div:last-of-type .row:last-of-type img{
                   margin-top: 15px;
               }
               >div:last-of-type img{
                   margin-top: 15px;
               }
           }
        }
        /*伙伴S*/
        .partner{
            padding-bottom: 40px;
            .partner_title{
                padding-left: 0;
            }
            .partner_content{
                margin-top:0 ;
                div{ 
                    background: #fff;
                    text-align: center;
                    cursor: pointer;
                    border: 1px solid #ddd;
                    border-radius: 3px;
                    &:nth-of-type(odd){
                        margin-right: calc(2/12*100%);
                    }
                     &:hover{
                        @include bshodow;
                    }
                    img{
                        border: none;
                        &:hover{
                            box-shadow: none;
                        }
                    }
                }
            }
        }
    }
}

